<template>
  <el-form
    ref="formRef"
    :model="ruleForm"
    :rules="rules"
    size="large"
    label-width="8%"
  >
    <el-form-item label="旧的密码" prop="oldPwd">
      <el-input
        v-model="ruleForm.oldPwd"
        type="password"
        autocomplete="off"
        placeholder="请输入旧的密码"
        show-password
      />
    </el-form-item>
    <el-form-item label="新的密码" prop="newPwd">
      <el-input
        v-model="ruleForm.newPwd"
        type="password"
        autocomplete="off"
        placeholder="请输入新的密码"
        show-password
      />
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPwd">
      <el-input
        v-model="ruleForm.confirmPwd"
        type="password"
        autocomplete="off"
        placeholder="请再次输入新的密码"
        show-password
      />
    </el-form-item>
    <div class="btns">
      <el-button icon="Refresh" @click="resetFormClick()">重置</el-button>
      <el-button icon="Edit" type="primary" @click="handleModifyClick(formRef)"
        >提交</el-button
      >
    </div>
  </el-form>
</template>

<script setup lang="ts">
/**
 * @author hzq
 * @date 2024/11/07
 * @description: 表单组件
 * @status:done
 */

// 模块引入
import { ref, reactive } from 'vue'
// import type { ElForm } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { IResetPwd } from '@/components/types'

// 0、定义组件名称
defineOptions({
  // 组件名称
  name: 'PersonalFormComp',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

// 1、定义表单数据
const ruleForm = reactive<IResetPwd>({
  oldPwd: '',
  newPwd: '',
  confirmPwd: ''
})
// 1.2、定义表单组件引用
const formRef = ref<FormInstance>()

//#region 表单提交验证

// 2、数据验证
const validatePass = (rule: any, value: any, callback: any) => {
  if (rule.field === 'newPwd') {
    if (value === '') {
      callback(new Error('请输入新的密码'))
    } else {
      if (ruleForm.confirmPwd !== '') {
        if (!formRef.value) return
        formRef.value.validateField('confirmPwd')
      }
      callback()
    }
  } else if (rule.field === 'confirmPwd') {
    if (value === '') {
      callback(new Error('请再次输入新的密码'))
    } else if (value !== ruleForm.newPwd) {
      callback(new Error('两次密码不一致，请重新输入'))
    } else if (value === ruleForm.oldPwd) {
      callback(new Error('新的密码与旧的密码相同，请重新输入不同的密码'))
    } else {
      callback()
    }
  }
}

// const validatePass2 = (rule: any, value: any, callback: any) => {
//   console.log(rule)
//   if (value === '') {
//     callback(new Error('请再次输入新的密码'))
//   } else if (value !== ruleForm.newPwd) {
//     callback(new Error('两次密码不一致，请重新输入'))
//   } else {
//     callback()
//   }
// }

const rules = reactive<FormRules<typeof ruleForm>>({
  oldPwd: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
  newPwd: [
    { required: true, message: '新的密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
    {
      pattern: /^[^<>"'|\\]+$/,
      message: '不能包含非法字符：<script > " \' \\\ |',
      trigger: 'blur'
    },
    { validator: validatePass, trigger: 'blur' }
  ],
  confirmPwd: [
    { required: true, message: '确认密码不能为空', trigger: 'blur' },
    { validator: validatePass, trigger: 'blur' }
  ]
})
//#endregion

// 3、定义组件触发的事件
const emit = defineEmits(['handleModify'])

// 5、表单重置

function resetFormClick() {
  formRef.value?.resetFields()
}

// 6、表单提交
function handleModifyClick(formRef: FormInstance | undefined) {
  if (!formRef) return
  formRef.validate((valid) => {
    if (valid) {
      emit('handleModify', { oldPwd: ruleForm.oldPwd, newPwd: ruleForm.newPwd })
    } else {
      console.log('error submit!')
    }
  })
}

defineExpose({
  resetFormClick
})
</script>

<style scoped lang="scss">
.modify {
  margin-top: 20px;
  margin-bottom: 80px;
}
.btns {
  margin-left: 70%;
}
</style>
